<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../align/jquery.align.js" type="text/javascript"></script>
<script src="../../ux.popdown/jquery.ux.popdown.js" type="text/javascript"></script>
<title>jquery.ux.popdown</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
.ux-popdown-div {
	border: 3px solid #DDD;
	background: #EEE;
	padding: 5px;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	var $list = $('#demolist a').popdown({
		delay: 300,
		align: "outside middle",
		showEvent: "mouseenter click",
		hideEvent: "mouseleave",
		html: function( $div ){
			return ('<img src="'+( this.href )+'" height="42" width="42" />');
			},
		events: { 
			show: function(){
				// hide the other tooltips
				$list.not( this ).ux("popdown.hide");
				} 
			}
		});
	});
</script>

<h2>ux.popdown / tooltip</h2>

<ul id="demolist">
	<li><a href="img/arts.png">Arts</a></li>
	<li><a href="img/news.png">News</a></li>
	<li><a href="img/places.png">Places</a></li>
	<li><a href="img/science.png">Science</a></li>
	<li><a href="img/sports.png">Sports</a></li>
	</ul>

</body></html>